<template>
    <view class="leaderboard">
        <view class="goBack" @click="goBack">返回</view>
        <view class="topList">
            <view class="topDetails first">
                <image src="https://cdn.yinhehh.cn/static/img/game/top_bg1.png" class="headerImg"></image>
                <image :src="dataLibraryImgList[0].avatarUrl" class="photoBorder"></image>

                <view class="score">
                    <view>{{ dataLibraryImgList[0].name }}</view>
                    <view>{{ dataLibraryImgList[0].score }}</view>
                </view>
            </view>
            <view class="topDetails second">
                <image src="https://cdn.yinhehh.cn/static/img/game/top_bg2.png" class="headerImg"></image>
                <image :src="dataLibraryImgList[1].avatarUrl" class="photoBorder"></image>

                <view class="score">
                    <view>{{ dataLibraryImgList[1].name }}</view>
                    <view>{{ dataLibraryImgList[1].score }}</view>
                </view>
            </view>
            <view class="topDetails third">
                <image src="https://cdn.yinhehh.cn/static/img/game/top_bg3.png" class="headerImg"></image>
                <image :src="dataLibraryImgList[2].avatarUrl" class="photoBorder"></image>

                <view class="score">
                    <view>{{ dataLibraryImgList[2].name }}</view>
                    <view>{{ dataLibraryImgList[2].score }}</view>
                </view>
            </view>
        </view>
        <view class="others">
            <view class="othersDetails" v-for="(item, i) in othersList">
                <view class="num">No.{{ i + 3 }}</view>
                <image :src="item.avatarUrl" class="photoBorder"></image>
                <view class="score">
                    <view>{{ item.name }}</view>
                    <view>{{ item.score }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            dataLibraryImgList: [],
            othersList: []
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },

        getmCharacterInfo() {
            uni.request({
                url: this.configs.gameUrl + '/play/mCharacterInfo/queryList',
                method: 'GET',
                header: {
                    'X-Access-Token': this.configs.userToken // 在header中添加token
                },
                data: {
                    type: 'ranking',
                    userId: this.configs.userId
                },
                success: data => {
                    console.log(data.data.result.records)
                    //this.dataLibraryImgList = data.data.result.records，并且在dataLibraryImgList中添加一个url字段
                    this.dataLibraryImgList = data.data.result
                    this.othersList = this.dataLibraryImgList.slice(3)
                    console.log(this.dataLibraryImgList)
                    console.log(this.othersList)

                },
                fail: (data, code) => { }
            });
        },
    },
    onLoad() {
        this.getmCharacterInfo()
    }
}
</script>
<style scoped lang="less">
.leaderboard {
    width: 100%;
    height: 100vh;
    //背景从上到下粉色渐变黄色
    background: linear-gradient(to bottom, #edcc92e9, #f1eac5fa);
    position: relative;

    .goBack {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 100rpx;
        height: 24rpx;
        //粉色背景
        background: #F8879C;
        border-radius: 12rpx;
        text-align: center;
        line-height: 24rpx;
        color: #fff;
        font-size: 14rpx;
    }

    .topList {
        display: flex;
        justify-content: space-between;
        padding: 40rpx 40rpx 0;

        .topDetails {
            width: 30%;
            position: relative;

            .score {
                position: absolute;
                left: 0;
                bottom: 8rpx;
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 0 8rpx;

                view {
                    font-size: 14rpx;
                    color: #fff;
                }
            }

            .headerImg {
                width: 60rpx;
                height: 80rpx;
                margin: 0 auto;
                display: block;
            }

            .photoBorder {
                width: 100%;
                height: 120rpx;
                border-radius: 10rpx;
            }
        }
    }

    .others {
        display: flex;
        padding: 0 40rpx;
        margin-top: 10rpx;
        flex-wrap: wrap;

        .othersDetails {
            width: 15%;
            margin-right: 2%;
            position: relative;

            .num {
                font-size: 16rpx;
                color: #fff;
                padding-left: 10rpx;
            }

            .photoBorder {
                width: 100%;
                height: 60rpx;
                border-radius: 10rpx;
            }

            .score {
                position: absolute;
                left: 0;
                bottom: 6rpx;
                width: 100%;
                display: flex;
                justify-content: space-between;
                padding: 0 8rpx;

                view {
                    font-size: 12rpx;
                    color: #fff;
                }
            }
        }

        .othersDetails:nth-child(6n) {
            margin-right: 0;
        }
    }
}
</style>